body{
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	background: #222;
}

.box{
	display: flex;
}

.box div{
	margin: 0 4em;
	position: relative;
	cursor: pointer;
}

.box div .iconfont{
	font-size: 5em;
	color: #c1c1c1;
}

.box div::before{
	font-family: 'iconfont';
	font-size: 5em;
	position: absolute;
	left:0;
	right: 0;
	top:0;
	bottom:0;
	height: 0;
	overflow: hidden;
	transition: 0.5s;
}

.box div:nth-child(1)::before{
	content:'\e736';
	color: #409eff;
	border-bottom:3px solid #409eff;
}

.box div:nth-child(2)::before{
	content:'\e632';
	color: #1aff77;
	border-bottom:3px solid #1aff77;
}

.box div:nth-child(3)::before{
	content:'\e6b7';
	color: #ff0000;
	border-bottom:3px solid #ff0000;
}

.box div:hover::before{
	height: 100%;
}